<script lang="ts" setup>
import { ref } from 'vue'
import pageTable from './components/table.vue'
import myMap from './components/map.vue'

const activeName = ref('first')
</script>

<template>
  <div class="layout-padding">
    <div class="layout-padding-view layout-padding-auto ">
      <el-tabs v-model="activeName" class="layout-tabs">
        <el-tab-pane label="设备分布" name="first">
          <myMap></myMap>
        </el-tab-pane>
        <el-tab-pane label="实时数据列表" name="second">
          <pageTable />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-tabs {
  height: 100%;
  :deep(.el-tabs__content) {
    height: calc(100% - 60px);
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
